<template>
  <m-layout>
    <mt-header slot="header" title="智能课程">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="home">
      <m-flexbox class="student-info" justify="space-between">
        <m-flexbox class="student-info-left">
          <e-avatar class="avatar" :src="curStudent.headPicture || ''"/>
          <m-flexbox class="avatarText" orient="vertical" justify="space-around">
            <div class="name">{{curStudent.name}}</div>
            <div class="text">点击头像，查看学员档案</div>
          </m-flexbox>
        </m-flexbox>
        <div v-if="!$route.query.idType && studentList.length > 0" class="student-info-right">切换孩子</div>
      </m-flexbox>
      <m-flexbox class="tabs" orient="horizontal" justify="space-around">
        <router-link to="/smartCourse/bodyDataList">
          <m-flexbox class="tabs-item" justify="center" align="center">
            <e-img class="imgs" src="/static/images/icon/teach_calendar.png"/>
            教学日历
          </m-flexbox>
        </router-link>
        <router-link :to="{name:'bodyDataList', query:{studentId: curStudent.id, studentName: curStudent.name}}">
          <m-flexbox class="tabs-item" justify="center" align="center">
            <e-img class="imgs" src="/static/images/icon/grow_data.png"/>
            身体数据
          </m-flexbox>
        </router-link>
      </m-flexbox>
      <m-section class="student-ability">
        <div class="heading heading-3">球员能力值</div>
        <router-link :to="{path: '/smartCourse/abilityGrowRecord', query: {studentId: curStudent.id}}">
          <div class="echart-box">
            <m-flexbox class="timeAndQuest" justify="space-between">
              <div class="times">
                <div>最新更新时间</div>
                <span>{{latestDate && new Date(latestDate).format()}}</span>
              </div>
              <div class="quest" @click.prevent="handleQuest">?</div>
            </m-flexbox>
            <div style="height: 250px" ref="radar"></div>
            <div class="radar-tips">点击雷达图查看能力成长记录</div>
          </div>
        </router-link>
      </m-section>
      <m-section class="last-score" v-if="lastScore">
        <router-link :to="{path: '/smartCourse/viewTestScores',
                    query:{studentId: curStudent.id,
                           testDate: lastScore.testDate,
                           testModeId: lastScore.testModeId,
                           testMethodId: lastScore.testMethodId}}">
          <m-flexbox class="last-score-box" orient="horizontal">
          <m-flexbox class="level" justify="center">{{lastScore.testScoreLevel}}</m-flexbox>
          <m-flexbox class="score-text" orient="vertical" direction="column" justify="space-between">
            <div>最后一次的测试成绩</div>
            <div>{{lastScore.testModeName}}</div>
            <div>{{lastScore.testMethodName}}</div>
            <div v-if="lastScore.testScoreType === 1">测试成绩：{{lastScore.testScore}}{{lastScore.testScoreDesc}}</div>
            <div v-else>测试成绩：{{lastScore.testScoreLevel}}</div>
          </m-flexbox>
          <e-img class="right-arrow" src="/static/images/icon/icon_more_2.png"/>
          <div class="tips">点击查看更多成绩</div>
        </m-flexbox>
        </router-link>
      </m-section>
      <m-section>
        <e-heading>{{curClass.className}}</e-heading>
        <m-flexbox class="buttom-tabs" orient="horizontal">
          <m-flexbox-item class="buttom-item" :class="{unread:unreadCount>0}">
            <e-img class="icon" src="/static/images/icon/my_icon_thecoach_new@2x.png"/>
            <div>教练点评</div>
          </m-flexbox-item>
          <m-flexbox-item class="buttom-item">
            <e-img class="icon" src="/static/images/icon/my_icon_plan_new@2x.png"/>
            <div>训练大纲</div>
          </m-flexbox-item>
          <m-flexbox-item class="buttom-item">
            <router-link :to="{path: '/smartCourse/teacherInfo', query: {classId: curClass.classRoomId}}">
              <e-img class="icon" src="/static/images/icon/my_icon_information_new@2x.png"/>
              <div>教练信息</div>
            </router-link>
          </m-flexbox-item>
          <m-flexbox-item class="buttom-item"></m-flexbox-item>
        </m-flexbox>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
import { MessageBox } from 'mint-ui'
// import { ScriptLoader } from '@/utils/loadScript.js'
export default {
  computed: {
    ...mapState({
      studentList: state => state.smartCourse.studentList,
      lastScore: state => state.smartCourse.lastScore,
      classList: state => state.smartCourse.classList,
      scoreRadar: state => state.smartCourse.scoreRadar,
      curStudentInfo: state => state.smartCourse.curStudent,
      unreadCount: state => state.smartCourse.unreadCount
    })
  },
  data () {
    return {
      latestDate: '',
      curStudent: {},
      curClass: {},
      eCharts: {},
      options: {},
      dataStore: {
        idType: '', // 身份类型
        studentId: 0
      },
      randarOptionObj: {
        nameArray: [],
        minArray: [],
        scoreArray: [],
        splitNumber: 5
      }
    }
  },
  mounted () {
    // const ScriptStore = { name: 'echarts', src: '/static/js/echarts/echarts.common.min.js' }
    // const scriptLoader = new ScriptLoader(ScriptStore)
    // this.eCharts = scriptLoader.load('echarts')
    this.dataStore.idType = this.$route.query.idType
    this.dataStore.studentId = this.$route.query.studentId
    import('echarts/lib/echarts').then((echarts) => {
      this.$$echarts = echarts
      return import('echarts/lib/chart/radar').then(() => {
        this.studentInfo().then(() => {
          this.getLastScores() // 获取学生最后一次成绩
          this.findClassRoomByStudId() // 获取班级列表
          this.requestEChartInfo() // 雷达图信息
        })
      })
    })
  },
  updated () {
    if (!this.eCharts) {
      this.showECharts()
    }
  },
  methods: {
    /**
     * @author guoqs1331
     * @time 2018/5/18
     * @description
     */
    handleQuest () {
      MessageBox.alert('能力值呈现了学员对于篮球运动七个最重点维度的当前能力值。姚明篮球俱乐部将会记录学员每一次培训、竞赛、测试的过程表现和结果成绩，通过分析，以最直观的能力值数值，展现给用户，帮助他们了解到，当前学员在各重点技术领域的成绩和进程，知道哪些维度他们做的很好甚至精通，哪些维度他们有待提高还需继续努力。')
    },
    /**
     * @author guoqs1331
     * @time 2018/5/15
     * @description 学生信息
     */
    async studentInfo () {
      if (this.dataStore.idType === 'teacher') { // 教练端
        await this.$store.dispatch('smartCourse/studentInfo', {
          studentId: this.$route.query.studentId
        })
        this.curStudent = this.curStudentInfo
        return this.curStudent
      } else { // 家长端
        await this.$store.dispatch('smartCourse/findStudent')
        this.curStudent = this.studentList[0]
        return this.studentList
      }
    },
    /**
     * @author guoqs1331
     * @time 2018/5/15
     * @description 最后一次测试成绩
     */
    getLastScores () {
      this.$store.dispatch('smartCourse/getLastScore', {
        studentId: this.curStudent.id
      })
    },
    /**
     * @author guoqs1331
     * @time 2018/5/15
     * @description 获取当前学生所在班级
     */
    async findClassRoomByStudId () {
      await this.$store.dispatch('smartCourse/findClassRoomByStudId', {
        studentId: this.curStudent.id
      })
      this.curClass = this.classList[0]
      this.findUnreadCount()
    },
    /**
     * @author guoqs1331
     * @time 2018/5/15
     * @description 教练点评未读数
     */
    findUnreadCount () {
      this.$store.dispatch('smartCourse/findUnreadCount', {
        studentId: this.curStudent.id,
        classId: this.curClass.classRoomId
      })
    },
    /**
     * @author guoqs1331
     * @time 2018/5/15
     * @description 雷达图数据及echarts加载
     */
    requestEChartInfo () {
      this.studentTestScoreRadarChart().then((radarInfo) => {
        this.displayECharts(radarInfo)
      })
    },
    studentTestScoreRadarChart () {
      return this.$store.dispatch('smartCourse/studentTestScoreRadarChart', {
        studentId: this.curStudent.id
      })
    },
    displayECharts (obj) {
      const radarMapObj = obj
      if (radarMapObj['testModels'] && radarMapObj['testModels'].length > 0) {
        const testModels = radarMapObj['testModels']
        this.latestDate = radarMapObj['latestDate']
        let nameArray = []
        let scoreArray = []
        let minArray = []
        testModels.forEach(item => {
          nameArray.push({
            'name': item['modeName'] + '\n' + item['totalAbilityScore'],
            max: radarMapObj['maxValue'],
            nameTextStyle: {
              align: 'center',
              width: 500
            }
          })
          minArray.push(radarMapObj['minValue'])
        })
        testModels.forEach(item => {
          scoreArray.push(item['totalAbilityScore'])
        })
        this.randarOptionObj = {
          nameArray: nameArray,
          minArray: minArray,
          scoreArray: scoreArray,
          splitNumber: 5
        }
        this.$nextTick(this.showECharts)
      }
    },
    showECharts () {
      let radarDom = this.$refs.radar
      this.eCharts = this.$$echarts.init(radarDom)
      this.eCharts.setOption(this.abilityChartsOptions(this.randarOptionObj))
    },
    abilityChartsOptions (param) {
      return {
        radar: [
          {
            indicator: param.nameArray,
            center: ['50%', '50%'],
            radius: 67, // 半径，可放大放小雷达图
            name: { // 外围文字描述
              textStyle: {
                color: '#000000',
                fontSize: 15
              }
            },
            nameGap: 15, // 外围文字距离雷达图距离
            splitArea: {// 层级间隔区域
              show: false
            },
            axisLine: {// 半径散射线
              lineStyle: {
                color: '#c1c1c1'
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            itemStyle: {
              normal: {
                areaStyle: {}
              }
            },
            data: [
              {
                value: param['scoreArray'],
                symbol: 'none', // 节点圆圈不显示
                itemStyle: {
                  normal: {
                    color: '#f4d320',
                    label: {
                      show: true,
                      formatter: function (params) {
                        return params.value
                      }
                    },
                    lineStyle: {
                      color: '#f4d320',
                      width: 2
                    }
                  }
                },
                areaStyle: {
                  normal: {
                    opacity: 0.56
                  }
                }
              },
              {
                value: param['minArray'],
                symbol: 'none',
                itemStyle: {
                  normal: {
                    color: '#b71c25',
                    label: {
                      show: true,
                      formatter: function (params) {
                        return params.value
                      }
                    },
                    lineStyle: {
                      color: '#b71c25',
                      width: 2
                    }
                  }
                },
                areaStyle: {
                  normal: {
                    opacity: 0.5
                  }
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .student-info{
    background: #221814;
    height: 1.58rem;
    box-sizing: border-box;
    padding: 0 0.3rem 0 0.3rem;
    .student-info-left{
      width: auto;
      .avatar{
        width: 1rem;
        height: 1rem;
      }
      .avatarText{
        color: $color-white;
        width: auto;
        height: 1rem;
        margin-left: 0.2rem;
        .name{
          font-size: $font-size-large;
          width: 100%;
        }
        .text{
          font-size: $font-size-small;
          opacity: 0.8;
        }
      }
    }
    .student-info-right{
      font-size: 0.3rem;
      color: $color-white;
      &:before{
        content: "";
        display: inline-block;
        width: 0.32rem;
        height: 0.28rem;
        background: url(/static/images/icon/switch.png) no-repeat 50%/contain;
        background-size: 100% 100%;
        margin-right: .1rem;
      }
    }
  }
  .tabs{
    background: $color-white;
    height: 1rem;
    .tabs-item{
      color: $color-black;
      .imgs{
        width: 0.64rem;
        height: 0.64rem;
      }
    }
  }
  .student-ability{
    .echart-box{
      padding-bottom: 0.36rem;
      .timeAndQuest{
        box-sizing: border-box;
        padding: 0 0.34rem 0 0.24rem;
        .times{
          color: $color-sub;
          font-size: 0.24rem;
        }
        .quest{
          width: 0.38rem;
          height: 0.38rem;
          line-height: 0.38rem;
          text-align: center;
          box-sizing: content-box;
          border-radius: 100%;
          background: #221814;
          color: #fff;
        }
      }
      .radar-tips{
        font-size: 0.24rem;
        color: #999;
        text-align: center;
      }
    }
  }
  .last-score{
    background: #221814;
    height: 2rem;
    .last-score-box{
      height: 100%;
      position: relative;
      .level{
        color: #F4D320;
        width: 2rem;
        height: 100%;
        font-weight: bold;
        font-size: 0.96rem;
      }
      .score-text{
        box-sizing: border-box;
        padding: 0.18rem 0;
        width: auto;
        height:100%;
        color: $color-white;
        div{
          width: 100%;
          font-size: 0.28rem;
        }
      }
      .tips{
        position: absolute;
        right: 0.24rem;
        top: 1.3rem;
        font-size: 0.24rem;
        color: $color-black-base;
      }
      .right-arrow{
        position: absolute;
        width: 0.3rem;
        right: 0.24rem;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
      }
    }

  }
  .buttom-tabs{
    .buttom-item{
      width: auto;
      text-align: center;
      padding-top: 0.3rem;
      padding-bottom: 0.34rem;
      color: $color-black-base;
      font-size: $font-size-small;
      .icon{
        width: 0.64rem;
      }
    }
    .unread{
      position: relative;
      &:after{
        position: absolute;
        right: .4rem;
        top: .2rem;
        content: '';
        width: .15rem;
        height: .15rem;
        border-radius: .15rem;
        background: $color-error;
      }
    }
  }
</style>
